import React, {PureComponent} from 'react';
import {connect} from 'react-redux';
import {subNumber} from "../store/features/counter";

class PartOne extends PureComponent {

    add(num) {
        this.props.subNumber(num)
    }

    render() {
        const {counter, banners} = this.props;
        const numbers = [1,2,5,10]
        return (
            <div>
                Subtract（{counter}）
                <p>
                    {numbers.map(number => (
                        <button key={number} onClick={e => this.add(number)}>-{number}</button>
                    ))}
                </p>
                <ul>
                    {
                        banners.map((item, index) => (
                            <li key={index}>{item.title}</li>
                        ))
                    }
                </ul>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    counter: state.counter.counter,
    banners: state.home.banners
})
const mapDispatchToProps = dispatch => ({
    subNumber: function(number) {
        dispatch(subNumber(number))
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(PartOne);